<template>
	<view>
		<!-- 列表 -->
		<view v-for="(item,index) in needUser" :key="index">
			<wxlist :user="item" ref="mychild" @longpress='long(index)'></wxlist>
		</view>
		<!-- 剪切板 -->
		<view class="content">
			<Modal v-model="cpshow" title="剪贴板" :text="cptext" @cancel='cancel' confirmText="打开" @confirm='confirm' />
		</view>
		<!-- 底部 -->
		<view v-if="btshow" class="animated bounceInUp btbotome">


			<view class="bttext" @click="btshowif(3)" >返回</view>
			<view class="bttext" @click="btshowif(1)">{{one}}</view>
			<view class="bttext" @click="btshowif(2)" >删除联系人</view>

		</view>
	</view>
</template>

<script>
	import a from '../../js/request.js';
	// 引入组件wx
	import wxlist from '../../components/wx-list.vue'
	// 相册
	import Modal from '../../components/x-modal/x-modal.vue';
	var b = new a
	export default {
		data() {
			return {
				// // list显示
				// show:false,
				// 接受服务器
				needUser: [{
						src: 'http://ani-qi.gitee.io/resources/ai.jpg',
						name: 'Ai小助手',
						crx: 'Hello，我是你的Ai小助手，很高兴认识你',
						// 是否红点
						bt:true
					},
					{
						src: 'http://ani-qi.gitee.io/resources/6.jpg',
						name: '微信小程序',
						crx: '前台UI构建以完成，后台PHP正在写workerman',
						// 是否红点
						bt:true
					},
					{
						src: 'http://ani-qi.gitee.io/resources/1.jpg',
						name: 'Ani-cc',
						crx: '你好,很高兴认识你',
						
					},
					{
						src: 'http://ani-qi.gitee.io/resources/3.jpg',
						name: '小彩琪',
						crx: '祝贺你早日通过考试,下午考试加油哦'
					}
				],
				// 剪贴板
				cpshow: false,
				connect: '',
				cptext: '',
				btshow: false,
				
				one:'置顶',
				// 用户点击了哪一个列表
				list_index:''
			};
		},
		methods: {
			// 弹出框
			btshowif(e)
			{
				console.log(e,this.list_index)
				if(e==1)
				{
					// 父触发子组(wmwm)                                           this is w
					this.btshow = true
					if(this.one=='取消关注')
					{
						this.$refs.mychild[this.list_index].meclick()
						this.one='关注'
					}
					else if(this.one=='关注')
					{
						this.$refs.mychild[this.list_index].udclick()
						// bug
						// let temp = this.needUser[this.list_index]
						// this.needUser[this.list_index]=this.needUser[0]
						// this.needUser
						this.one='取消关注'
						}
						
				}
				else if(e==2)
				{
					// 删除联系人
					this.$refs.mychild[this.list_index].del()
					this.btshow=false
				}
				else if(e==3)
				{
					console.log(456455)
					this.btshow=false
				}
			},
			//剪切板
			shao() {
				uni.scanCode({
					success: (res) => {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);

						uni.setClipboardData({
							data: res.result,
						});
						setTimeout(() => {
							this.cptext = res.result
							this.cpshow = true
							console.log(this.show)

						}, 1000)

					}
				});
			},
			cancel() {},
			confirm() {
				plus.runtime.openURL(this.cptext)
			},
			//长按
			long(index) {
				console.log(index)
				this.list_index=index
				uni.vibrateLong({
					success: () => {
						console.log('success');
						this.one='取消关注'
						this.btshow = true
						
					}
				});
			}

		},
		// 注册
		components: {
			wxlist,
			Modal
		},
		// 右上角的事件
		onNavigationBarButtonTap(val) {
			if (val.index == 1) {
				this.shao()
			}
		},
		// // 下拉更新bug
		//  onPullDownRefresh() {
		//         console.log('refresh');
		//         setTimeout(function () {
		//             uni.stopPullDownRefresh();
		//         }, 1000);
		//     }

	}
</script>

<style lang="less">
	// 是否深色
	.colo {
		background-color: #BBBBBB;
	}
	

	// 底部弹出框
	.btbotome {
		color: #1296db;
		opacity: .7;
		width: 100%;
		background-color: #f0efee;
		height: 200rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		text-align: center;
		font-size: 45rpx;

		.bttext {
			font-size: 38rpx;
			border-bottom: 1rpx solid #B2B2B2;
		}
	}
	.xin {
		z-index: 199;
		width: 0;
		height: 0;
		border: 20rpx solid;
		border-color: transparent transparent #333333 transparent;
		position: fixed;
		right: 2%;
		// opacity: .8;
		top: -20rpx;
	}

	.bt {
		z-index: 99;
		position: fixed;
		right: 1.8%;
		top: 18rpx;
		background-color: #333333;
		color: #EBECEB;
		width: 35%;
		font-size: 38rpx;
		border-radius: 10rpx;

		text {
			margin-left: 4%;
			letter-spacing: 13rpx;
		}
	}
</style>
